<template>
  <div class="popVue">
    <div class="btns">
      <Poptip
        :title="title"
        placement="bottom-start"
        width="400"
        v-model="visible"
      >
        <template slot="content">
          <div
            class="ctent d-flex"
            :style="{ fontSize: isNaN(fontSize) ? fontSize : fontSize + 'px' }"
          >
            <div
              class="item w-16"
              v-for="(item, index) in list"
              :label="item"
              :key="index"
              @click="doCheck(item, index)"
              :class="{ active: acIndex === index }"
            >
              {{ item }}
            </div>
          </div>
        </template>
        <template slot="title">
          <div
            class="t-title d-flex j-sb"
            :style="{ fontSize: isNaN(fontSize) ? fontSize : fontSize + 'px' }"
          >
            <span class="pop-title">{{ title }}</span>
            <Icon type="ios-close" size="24" @click="closePop" />
          </div>
        </template>
        <div class="add-btn flex align-center">
          <Button type="text" size="small" style="color: #2c66ab">选</Button>
        </div>
      </Poptip>
    </div>
  </div>
</template>

<script>
export default {
  name: "popVue",
  props: {
    // 接收回显的数据，用来回显
    value: {
      type: String,
      default: () => "",
    },
    // 数据
    list: {
      type: Array,
      default: () => [],
    },
    // title标题
    title: {
      type: String,
      default: () => "",
    },
    // 参数
    fieldName: {
      type: String,
      default: () => "",
    },
    // 字体大小
    fontSize: {
      type: [String, Number],
      default: () => 16,
    },
  },
  data() {
    return {
      acIndex: "",
      visible: false,
    };
  },
  watch: {
    value: {
      handler(nval) {
        if (nval) {
          var index = this.list.findIndex((it) => it == nval);
          this.acIndex = index;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},

  methods: {
    // 选中
    doCheck(item, index) {
      // 激活样式
      // this.acIndex = index;
      // 抛出数据
      this.$emit("setRecord", item, this.fieldName);
      // 关闭pop
      this.closePop();
    },
    // 关闭pop
    closePop() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popVue ::v-deep {
  .t-title {
    .ivu-icon {
      cursor: pointer;
    }
  }
  .add-btn {
    .ivu-btn {
      padding-top: 0;
    }
  }
  .ivu-poptip-body {
    padding: 16px;
    .ctent {
      flex-wrap: wrap;
      gap: 10px 23px;
      .item {
        cursor: pointer;
        &:hover {
          color: #2c66ab;
        }
        &.active {
          color: #0f71e9;
        }
      }
    }
  }
}
</style>
